<template>
  <div class="login-page">
    <div class="logo">
    </div>
    <van-form
      @submit="toLogin"
      label-width="50px"
    >
      <van-field
        v-model="login.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="login.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="login.code"
        center
        clearable
        label="验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button
            size="small"
            color="#d41e32"
          >发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin-top: 40px;">
        <van-button
          round
          block
          color="#d41e32"
          native-type="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { code, Login } from "/@api/index";
import { setCache } from "/@utils/tools.js";

export default {
  name: "Login",
  setup(props) {
    const { push } = useRouter();
    const { login, toLogin } = initLogin(push);
    return { login, toLogin };
  },
};
const initLogin = (push) => {
  const login = reactive({
    username: "",
    password: "",
    code: "",
  });
  const toLogin = async () => {
    const params = {
      mobile: login.username,
      account_pwd: login.password,
    };
    const { data } = await Login(params);
    if (data.code != code.OS) return;
    const userData = {
      userId: data.data.user_id,
      userName: data.data.username,
      avatar: data.data.avatar,
    };
    setCache("user", JSON.stringify(userData));
    push("/home");
  };
  return { login, toLogin };
};
</script>

<style scoped lang="less">
.login-page {
  height: 100%;
  padding: 0 40px;
  padding-top: 35%;
  box-sizing: border-box;
  .logo {
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../assets/LOGO-red.png);
  }
}
</style>
